<template>
    <el-dialog
    :visible.sync="isShowDialog"
    :open="openDialog"
    :close="handleClose"
    :title="isFlag?'新增':'编辑'"
    width="50%"
    :close-on-click-modal="false">
        <el-form
            ref="infoRef"
            :model="infoForm"
            label-width="100px"
            :rules="rules">
            <el-form-item label="系统代码" prop="sysCode">
                <el-input v-model="infoForm.sysCode" placeholder="请输入系统代码" clearable></el-input>
            </el-form-item>
            <el-form-item label="系统名称" prop="sysName">
                <el-input v-model="infoForm.sysName" placeholder="请输入系统名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="系统版本" prop="sysVersion">
                <el-input v-model="infoForm.sysVersion" placeholder="请输入系统版本" clearable></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select v-model="infoForm.type" placeholder="请选择类型" style="width: 100%;">
                    <el-option
                        v-for="(item, index) in typeOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="项目负责人">
                <el-input v-model="infoForm.projectLeader" placeholder="请输入项目负责人" clearable></el-input>
            </el-form-item>
            <el-form-item label="发布日期">
                <el-date-picker
                style="width: 100%;"
                v-model="infoForm.date"
                type="date"
                placeholder="请选择发布日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleConfirm">保存</el-button>
        </div>
    </el-dialog>
</template>

<script>
/**
* @description: 新增编辑
* @create: 2020-08-31
* @author: niuwenli
*/
export default {
    name: 'sysInfoOperate',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        // 新增还是编辑
        flag: {
            type: Boolean,
            default: false
        },
        // 编辑数据
        updateData: {
            type: Object,
            default: () => {}
        }
    },
    components: {},
    data () {
        return {
            infoForm: {
                sysCode: '',
                sysName: '',
                sysVersion: '',
                type: '',
                projectLeader: '',
                date: ''
            },
            // 类型
            typeOptions: [
                {
                    label: '项目',
                    value: 0
                },
                {
                    label: '服务',
                    value: 1
                }
            ],
            rules: {
                sysCode: [{ required: true, message: '请输入系统代码',  trigger: 'blur' }],
                sysVersion: [{ required: true, message: '请输入系统版本',  trigger: 'blur' }],
                sysName: [{ required: true, message: '请输入系统名称',  trigger: 'blur' }],
                type: [{ required: true, message: '请选择类型',  trigger: 'change' }]
            },
            isShowDialog: false,
            isFlag: false,
            url: '',
            method: ''
        };
    },
    watch: {
        value (val) {
            this.isShowDialog = val;
        },
        flag (val) {
            this.isFlag = val;
        },
        updateData (val) {
            if (val) {
                this.infoForm = val;
            }
        }
    },
    methods: {
        openDialog () {},
        handleClose () {
            this.$emit('input', false);
            this.$refs.infoRef.resetFields();
        },
        handleConfirm () {
            this.$refs.infoRef.validate(valid => {
                if (!valid) return;
                if (this.isFlag) {
                    // 新增
                    this.url = `${this.baseUrl}sys_info`;
                    this.method = 'post';
                } else {
                    // 编辑
                    this.url = `${this.baseUrl}sys_info/${this.infoForm.rowId}`;
                    this.method = 'put';
                }
                this.$axios({
                    url: this.url,
                    method: this.method,
                    data: this.infoForm
                }).then(res => {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                    this.$emit('success');
                    this.handleClose();
                });
            });
        }
    }
};
</script>
<style>

</style>